<!--
* description: 订单审核时机设置
* author: xiaochengz
* createdDate: 2021-03-4
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-is-show-more-btn="true"
      :dynamic-api-style="'restful'"
      :dynamic-cell-style="columnStyle"
      :callback-obj="callbackObj"
    />

      <div class="checkNowrap">
         <!-- <el-table
       
    :data="tableData"
    style="width: 100%;height:100%">
    <el-table-column
      label="周日期"
      width="100"
      align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="审核时间"
      align="left"
      header-align="center"
     >
     
       <template slot-scope="scope">
          <el-checkbox-group v-model="checkList[scope.$index]" @change="checkChange(scope)">
            <el-checkbox v-for="(item,index) in scope.row.dataTime" :key="index" :label="item.checked">
            {{item.name }}
            </el-checkbox>
            </el-checkbox-group>
    </template>
    </el-table-column>
    <el-table-column label="全选"  width="100" header-align="center" align="left">
      <template slot-scope="scope">
      
         <el-radio-group v-model="radio">
           <el-radio @change="handleEdit(scope.$index, scope.row,0)" :label="scope.$index+string1">全选</el-radio>
           <el-radio @change="handleEdit(scope.$index, scope.row,1)"  :label="scope.$index+string2">全不选</el-radio>
           <el-radio @change="handleEdit(scope.$index, scope.row,2)"  :label="scope.$index+string3">半点全选</el-radio>
           <el-radio @change="handleEdit(scope.$index, scope.row,3)"  :label="scope.$index+string4">整点全选</el-radio>
         </el-radio-group>
      </template>
    </el-table-column>
  </el-table> -->
          <el-form ref="form"  label-width="80px" class="formStyle">
            <el-row class="formStyle-header">
              <el-col :span="1">周日期</el-col>
              <el-col :span="21">审核时间</el-col>
              <el-col :span="2">全选</el-col>
            </el-row>

             <el-row class="formStyle-content" v-for="(item,indexs) in fromData" :key="item.id">
              <el-col class="formStyle-content-col" :span="1">{{item.week}}</el-col>
              <el-col :span="21">
               
                  <el-checkbox-group v-model="checkList[indexs]">
                    <el-checkbox v-for="(item,index) in dataTime" :key="index" :label="item.name" name="name"></el-checkbox>
                  </el-checkbox-group>
               
              </el-col>
              <el-col class="formStyle-content-radio" :span="2">
              
                  <el-radio-group v-model="radio[indexs]">
                    <el-radio v-for="(item,index) in radioList" :key="index" :label="item.radio" @change="checkRadio(indexs,item.radio)"></el-radio>
                  </el-radio-group>
               
              </el-col>
            </el-row>
          </el-form>
    
      </div>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import Vue from "vue";
// import moment from 'moment'

export default {
  name: "orderApprovalTimeSetting",

  components: {
    OneTableTemplate,
    // Edit: () => import("./edit"),
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ""], function () {
      next();
    });
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);

    return {
      icon: "el-icon-arrow-down",
      status: false,
      editRowData: {},
      selectiondata: null,
      // 网格查询API配置对象
      apiConfig: {
        ServiceCode: "queryBigArea",
        APIUrl: "/mp/e3sh/basics/ve/bigareaService/queryBigArea.do",
      },
      columnStyle({ row, column, rowIndex, columnIndex }) {
        if (
          (columnIndex === 8 && parseFloat(row.profitQuarters) <= 30) ||
          (columnIndex === 12 && parseFloat(row.outletsQuarters) < 25)
        ) {
          return "background:red";
        } else if (
          (columnIndex === 8 && parseFloat(row.profitQuarters) > 35) ||
          (columnIndex === 12 && parseFloat(row.outletsQuarters) > 30)
        ) {
          return "background:yellow";
        }
      },
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          name: "",
          clickEvent: () => this.allChoose(1),
          text: '全选', // 查询
          position: "right",
          fuzzySearch: true,
        },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          name: "",
          clickEvent: () => this.allChoose(2),
          text: '全不选',
          position: "right", // 重置
        },
        {
          compKey: "btnKey3",
          type: "",
          size: "small",
          clickEvent: () => this.reduction(),
          text: "还原",
          name: "",
          position: "right",
        },
              {
          compKey: "btnKey3",
          type: "",
          size: "small",
          clickEvent: () => this.save(),
          text: "保存",
          name: "",
          position: "right",
        },
      ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
              .tableComponents
          : [
            ],

      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            ],
      callbackObj: {
        // 手动勾选时
        onCheckSelect: (selection, row) => {
          // this.selectiondata = selection;
        },
        onCheckSelectChange: (selection) => {
          // this.onCheckSelectChange1(selection);
        },
      },
      // 表单查询数据
      formField: this.$utils.getFormField(
        this,
        {
          // discardDate: [moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
          bigAreaCode: "",
          bigAreaName: "",
          isEnable: "",
          bigAreaId: "",
          updateControlId: "",
          orderStatus: "",
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),




        // checked:true,

      fromData:[
        {id:'1',week:'星期一'},
        {id:'2',week:'星期二'},
        {id:'3',week:'星期三'},
        {id:'4',week:'星期四'},
        {id:'5',week:'星期五'},
        {id:'6',week:'星期六'},
        {id:'7',week:'星期天'},

      ],


        dataTime:[
          {name:'00:00',checked:'0'},
          {name:'00:30',checked:'1'},
          {name:'01:00',checked:'2'},
          {name:'01:30',checked:'3'},
          {name:'02:00',checked:'4'},
          {name:'02:30',checked:'5'},
          {name:'03:00',checked:'6'},
          {name:'03:30',checked:'7'},
          {name:'04:00',checked:'8'},
          {name:'04:30',checked:'9'},
          {name:'05:00',checked:'10'},
          {name:'05:30',checked:'11'},
          {name:'06:00',checked:'12'},
          {name:'06:30',checked:'13'},
          {name:'07:00',checked:'14'},
          {name:'07:30',checked:'15'},
          {name:'08:00',checked:'16'},
          {name:'08:30',checked:'17'},
          {name:'09:00',checked:'18'},
          {name:'09:30',checked:'19'},
          {name:'10:00',checked:'20'},
          {name:'10:30',checked:'21'},
          {name:'11:00',checked:'22'},
          {name:'11:30',checked:'23'},
          {name:'12:00',checked:'24'},
          {name:'12:30',checked:'25'},
          {name:'13:00',checked:'26'},
          {name:'13:30',checked:'27'},
          {name:'14:00',checked:'28'},
          {name:'14:30',checked:'29'},
          {name:'15:00',checked:'30'},
          {name:'15:30',checked:'31'},
          {name:'16:00',checked:'32'},
          {name:'16:30',checked:'33'},
          {name:'17:00',checked:'34'},
          {name:'17:30',checked:'35'},
          {name:'18:00',checked:'36'},
          {name:'18:30',checked:'37'},
          {name:'19:00',checked:'38'},
          {name:'19:30',checked:'39'},
          {name:'20:00',checked:'40'},
          {name:'20:30',checked:'41'},
          {name:'21:00',checked:'42'},
          {name:'21:30',checked:'43'},
          {name:'22:00',checked:'44'},
          {name:'22:30',checked:'45'},
          {name:'23:00',checked:'46'},
          {name:'23:30',checked:'47'},
         
        
        ],

        radioList:[
          {radio:'全选'},
          {radio:'全不选'},
          {radio:'半点全选'},
          {radio:'整点全选'}
        ],

      
        radio:[[],[],[],[],[],[],[]],
        checkList:[[],[],[],[],[],[],[]],

    };
  },

 


  watch: {
    "formField.orderStatus": {
      deep: true,
      handler: function (newV, oldV) {
        console.log("watch中：", newV);
        // this.querybystatus(newV)
        this.queryTable();
      },
    },
  },
  mounted() {
    this.querySave()
  },

  created(){  
    let arr = []
    this.fromData.forEach(item=>{
       item = {...item,dataTime: this.dataTime}
       console.log(item)
       arr.push(item)
       
    })
    this.fromData = arr
    

    // console.log(this.tableData)
    // console.log(this.dataTime)
   
  },

  methods: {

    allChoose(type){
      if(type == 1){//全选
        this.dataTime.forEach(item=>{
          for(let i = 0;i<7;i++){
             this.checkList[i].push(item.name)   
               this.radio[i] = '' 
          }
         
        })
         
        
        // this.radioList.forEach((item)=>{
        //   item.radio = ''
        // })
        console.log(this.checkList)
     
      }else if(type == 2){ //全不选
      for(let i=0;i<7;i++){
         this.$set(this.checkList,i,[])
          this.radio[i] = '' 
      }
         
      }
    },


    //点击单选框
    checkRadio(index,radio){
      if(radio == '全选'){
        
        this.dataTime.forEach(item=>{
          this.checkList[index].push(item.name)   
    })
      }else if(radio=='全不选'){
         this.$set(this.checkList,index,[])
      }else if(radio == '半点全选'){
            this.$set(this.checkList,index,[])
           this.dataTime.forEach(item=>{
             if(item.name[3] == '3'){
               this.checkList[index].push(item.name)   
             }
         
    })
      }else{
          this.$set(this.checkList,index,[])
          this.dataTime.forEach(item=>{
             if(item.name[3] == '0'){
               this.checkList[index].push(item.name)   
             }
         
    })
      }
      
      console.log(index)
      console.log(radio)
      console.log(this.checkList)
    },
    //保存
    save(){
      
    
      // console.log(this.refundData)
      // if(this.refundData.length !=1 ) return this.$message('只能勾选一条数据！')
      this.editSave()
    },
      //保存
    editSave() {
      const that = this
      let obj = {
        paramList:this.checkList
      }
      
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
        // apiConfig:'/mp/e3sh/spareparts/orderReviewTimingSettingService/save',
         apiConfig: {
          APIUrl:'/mp/e3sh/spareparts/orderReviewTimingSettingService/save.do',
        },
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: obj

      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })

          // this.formFieldEdit = response.rows[0]
 
        
        
        } else {
          // 保存失败
          this.$message({
            message:
             response.msg,
            type: 'warn',
            uration: 1000
          })
        }

      //               this.editPopupsState = 'add'
      // this.editPopupsVisible = true
     
      })
    },

     //时间返显
    querySave() {
      const that = this
      const queryObj = {
         apiConfig: {
          APIUrl:'/mp/e3sh/spareparts/orderReviewTimingSettingService/saveTime.do',
        },
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: ''

      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        this.checkList = response
        // if()
        // this.$message({
        //   message: response.msg,
        //   type: 'success',
        //   duration: 1000
        // }) 
      })
    },

    //还原
    reduction(){
         for(let i=0;i<7;i++){
         this.$set(this.checkList,i,[])
          this.radio[i] = '' 
      }
    }
    
  },
};
</script>
<style lang='scss' scoped>
.red {
  background: red;
}



.checkNowrap ::v-deep .el-table .cell{
   white-space: normal;
  //  text-align: left;
  //  background-color: red;
   
}
.checkNowrap ::v-deep .el-checkbox{
  width: 70px;
}
.checkNowrap{
  height: 78vh;
}

/deep/ .el-table .el-table__body-wrapper{
  height: 100%;
  padding-bottom: 35px;
  
}

.formStyle{
  background-color: white;
}
.formStyle-header{
  background-color: rgb(176, 196, 222);
  text-align:center
}
.formStyle-content{
  border-bottom: 1px solid rgb(195, 195, 197);
  margin-bottom: 10px;
}
.el-form-item{
  margin-bottom:-30px
}
.formStyle-content-col{

  text-align: center;
  // display: inline-block;
  // top: 50%;
  line-height: 100px;
  // line-height: 200px;
  //  border-right: 1px solid rgb(195, 195, 197);
  //  margin-right: 10px;
 
 
  
}

.el-checkbox{
  font-size: 18px;
}
.formStyle-content-radio{
  text-align: left;
}

</style>

<style>
/* .el-table .el-table__body-wrapper{
  height: 100%;
  padding-bottom: 35px;
} */
</style>

